<%@page import="com.metacube.questionbank.model.User"%>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>

<script type="text/javascript">

	$(document).ready(function(){
		$('#dvTemplateContainer').hide();
	});

	function relatedQuestionsAjax() {
		$.ajax({
			url : 'pi.json',
			datatype : 'json',
			data : "question=" + $('#title').val(),
			success : function(data) {
				$('#dvTemplateContainerArea').empty();
				$('#dvTemplateContainer').show();
				$.each(data, function(index) {
					var timestamp = data[index].questionDate;
					var d = new Date(timestamp);
					$('#dvTemplateContainerArea').append('<div class="question-name">'+ 
							'<div class="col-md-11">'+
							'<h3 id="question_heading"><a href="QuestionAnswer.htm?id='+data[index].quesId+
										' "title="question" id="question">'+data[index].questionDesc+'</a></h3>'+
								'<div class="tags_posted clearfix">'+
									'<div class="pull-right">'+
										+d.getDate()+'-'+d.getMonth()+'-'+d.getFullYear()+' '+d.getMinutes() +':'+d.getHours()+
									'</div>'+
								'</div>'+
							'</div>'+
						'</div>');
				});
			}
		});
	}
	
	function hideDvTemplateContainer() {
		$('#dvTemplateContainerArea').empty();
		$('#dvTemplateContainer').hide();
	}
	
</script>


<script type="text/javascript">
function split(val) {
    return val.split(/,\s*/);
}
function extractLast(term) {
    return split(term).pop();
}

$(document).ready(function() {
$("#tags").autocomplete({
source: function (request, response) {
	       $.getJSON("${pageContext. request. contextPath}/get_tag_list.json", {
	            term: extractLast(request.term)
}, response);
	        
	    },
	    search: function () {
	        // custom minLength
	        var term = extractLast(this.value);
	        if (term.length < 1 ) {
	            return false;
	        }
	    },
	    focus: function () {
	        // prevent value inserted on focus
	        return false;
	    },
	    select: function (event, ui) {
	        var terms = split(this.value);
	        
	        // remove the current input
	        terms.pop();
	        
	        // add the selected item
	        terms.push(ui.item.value);
	        // add placeholder to get the comma-and-space at the end
	        terms.push("");
	        this.value = terms.join(",");
	       
	        return false;
	    },
	    change: function(event,ui){
	    	var terms = split(this.value);
	    	if(ui.item.value!=null){
	    		
	    	}
	    	else{alert(terms);}
	    	
	    }
	});

	
});
</script>

<script>
function myFunction() {
    var str = document.getElementById("tags").value;
    document.getElementById("tag_no-error").innerHTML = "";
    document.getElementById("duplicate-tag-error").innerHTML = "";
    if(str=="") {
    	 document.getElementById("tag_no-error").innerHTML = "Please enter atleast one tag...";
    	 return false;
    }
if(str.charAt(str.length - 1)==','){
	
	 str =str.substring(0, str.length-1);
 
}
    var res = str.split(",");

if(res.length>5){
  document.getElementById("tag_no-error").innerHTML = "Sorry! You can enter 5 tags only...";
  return false;
}
for(i=0;i<res.length-1;i++)
{
for(j=i+1;j<res.length;j++){
if(res[i]==res[j]){
document.getElementById("duplicate-tag-error").innerHTML = "Duplicate tags Not allowed....";
return false;
}
}
}
return true;
}
</script>
	<% 
User user=(User)session.getAttribute("user");
	%>
<div class="container submit_question">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title">Place your question</h3>
		</div>
		<div class="panel-body">
			<form action="questions.htm?id=<%=user.getUser_id() %>" method="post">
				<div class="form-group titleDv" id="titleDiv">
					<label for="title">Title</label>
					<input type="text" required="required" class="form-control" autocomplete="off" placeholder="title" id="title" onkeyup="relatedQuestionsAjax();" name="title">
					<div id="dvTemplateContainer">
						<a class="glyphicon glyphicon-remove-circle remove" onclick="hideDvTemplateContainer()"></a>
							<div id="dvTemplateContainerArea">
							</div>
					</div>
				</div>
				<div class="form-group">
					<label for="title">Question Description</label>
					<textarea required="required" class="form-control ckeditor"  rows="15" id="description" name="description"></textarea>								
				</div>
				<div class="form-group">
					<label for="title">Tags</label>
					<input type="text" class="form-control" placeholder="tags" id="tags" name="tags" onKeyUp="myFunction()">
					<span style="color:red" id="tag_no-error"></span>
                    <span style="color:red" id="duplicate-tag-error"></span>
				</div>
				<div class="form-group">
					<div class="btn-group">
					
						<button type="submit" value="post"class="btn btn-info" onClick="return myFunction();">Post</button>
						
					</div>
				</div>
			</form>
		</div>
	</div>
</div>